<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增样品')" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-sample-add">
        <h4 class="form-header h4">样品信息</h4>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">名称：</label>
            <div class="col-sm-8">
                <input id="samName" name="samName" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">Slot：</label>
            <div class="col-sm-8">
                <input name="samSlot" class="form-control" type="number" min="1" max="999" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">描述：</label>
            <div class="col-sm-8">
                <input name="samDes" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">质量：</label>
            <div class="col-sm-8">
                <input name="quantity" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">分子式：</label>
            <div class="col-sm-8">
                <input name="mFormula" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">分子量：</label>
            <div class="col-sm-8">
                <input name="mWeight" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">溶剂：</label>
            <div class="col-sm-8">
                <select class="form-control" id="solvent" name="solvent" required>
                    <option th:each="solvent:${solvents}" th:value="${solvent.solventName}" th:text="${solvent.solventName}" ></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">优先：</label>
            <div class="col-sm-8">
                <label class="toggle-switch switch-solid">
                    <input type="checkbox" id="priority">
                    <span></span>
                </label>
            </div>
        </div>
        <h4 class="form-header h4">服务选择</h4>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">请选择仪器：</label>
            <div class="col-sm-8">
                <select class="form-control selectpicker" id="sel-inst" data-none-selected-text="请选择仪器" onchange="selectInstrument()">
                    <option></option>
                    <option th:each="inst:${instruments}" th:data-subtext="${inst.hostId}" th:value="${inst.instId}" th:text="${inst.instName}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">请选择服务：</label>
            <div class="col-sm-8">
                <select class="form-control selectpicker" id="sel-services" data-none-selected-text="请选择服务(可多选)" onchange="selectServices()" multiple>
                    <option th:each="service:${services}" th:data-subtext="${service.serDes}" th:class="'inst-'+${service.instId}"
                            th:value="${service.serId}+','+${service.serName}" th:text="${service.serName}" style="display: none"
                            th:disabled="${service.userPermissionFlag == false}"></option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-select-js" />
<script th:inline="javascript">
    var prefix = ctx + "system/request2";

    $("#form-sample-add").validate({
        focusCleanup: true
    });

    /* 返回sample数据*/
    function getSample() {
        if ($.validate.form()) {
            //仪器必填判断
            var instId = $('#sel-inst').val();
            if($.common.isEmpty(instId)){
                $.modal.alertError("仪器不能为空");
                return null;
            }
            //服务必填判断
            var services = $('#sel-services').val();
            if($.common.isEmpty(services)){
                $.modal.alertError("服务不能为空");
                return null;
            }
            var data = $('#form-sample-add').serializeArray();
            var priority = $("input[id='priority']").is(':checked') == true ? 1 : 0;
            data.push({"name": "priority", "value": priority});
            return data;
        }
    }

    /* 选择仪器*/
    function selectInstrument(){
        $('#sel-services').find("option").hide();
        var instId = $('#sel-inst').val();
        $('.inst-'+instId).show();
        $("#sel-services").selectpicker('val', '').trigger("change");
        $('#sel-services').selectpicker('refresh');
    }

    /* 选择服务*/
    function selectServices(){
        var values = $('#sel-services').val();
        $(".method").remove();
        $.each(values, function (index, value){
            var split = value.split(',');
            // var html = [];
            var method = [];
            var config = {
                url: prefix + "/getMethods",
                type: "post",
                dataType: "json",
                data: {"serId": split[0]},
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍候...");
                },
                success: function(result) {
                    //回调事件
                    $.each(result.data, function (index, value) {
                        var option = '<option value="' + value.modId + '">' + value.modName + '</option>';
                        method.push(option);
                    })
                    var group = '<div class="form-group method"><label class="col-sm-3 control-label is-required">'+split[1]+'方法：</label>' +
                        '<div class="col-sm-8"><select class="form-control" name="method['+index+']" required>'+method.join("")+'</select></div></div>';
                    $('#form-sample-add').append(group);
                    $.modal.closeLoading();
                }
            };
            $.ajax(config)
        })
    }

</script>
</body>
</html>